<template>
    <div>
        <com-heard></com-heard>
        <div class="cons">
            <div class="news-1">
                <img src="../../../assets/news/10.png" alt />
            </div>
            <div class="news-0">
                <h1
                    v-for="(item, index) in navList"
                    :key="index"
                    :class="curIndex == index ? 'news-0-on' : ''"
                    @click="onTab(index)"
                >
                    {{ item.title }}
                </h1>
            </div>
            <div v-if="curIndex == 0">
                <div class="cont" v-html="grData.content"></div>
            </div>
            <div v-if="curIndex == 1">
                <div class="cont" v-html="grData.content"></div>
            </div>
            <div v-if="curIndex == 2">
                <div class="news pu-con">
                    <div class="form-con1">
                        <div style="height:50px"></div>
                        <div class="pc-211">
                            <div>
                                <p>{{ grData.title }}</p>
                                <a
                                    :href="imgUrl + grData.coverFileUrl"
                                    target="_blank"
                                    >点击下载</a
                                >
                            </div>
                            <el-form
                                :model="formData"
                                :rules="rules"
                                ref="formData"
                                label-width=""
                                class="demo-ruleForm"
                            >
                                <div class="form-con">
                                    <el-form-item label prop="coverImageUrl">
                                        <el-upload
                                            class="upload-demo"
                                            action="http://www.jssggxh.com:8082/tianti_module_interface//file/fitment/upload"
                                            :on-remove="handleRemove"
                                            :on-success="handleSuccess"
                                            :before-upload="beforeAvatarUpload"
                                            multiple
                                            :limit="1"
                                            :on-exceed="handleExceed"
                                            :file-list="fileList"
                                            ref="img-upload"
                                        >
                                            <el-button
                                                size="small"
                                                type="primary"
                                                >点击上传</el-button
                                            >
                                            <div
                                                slot="tip"
                                                class="el-upload__tip"
                                            >
                                                请上传zip压缩文件
                                            </div>
                                        </el-upload>
                                    </el-form-item>
                                </div>
                            </el-form>
                        </div>
                        <div class="pc-212">
                            <a href="JavaScript:;" @click="onRelease">提交</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <com-foot></com-foot>
    </div>
</template>

<script>
import comHeard from "@/components/jsscom-heard";
import comFoot from "@/components/com-foot";
import _ from "underscore";
import moment from "moment";
import { validPhone, validEmpty } from "@/utils/validate";

export default {
    components: {
        comHeard,
        comFoot,
    },
    data() {
        return {
            imgUrl: "",
            navList: [],
            param: {},
            grData: {},

            fileList: [],
            formData: {
                coverImageUrl: [],
            },
            rules: {
                coverImageUrl: [
                    { required: true, message: "请上传文件", trigger: "blur" },
                ],
            },
            user: {},
            curIndex: 0,
        };
    },
    created() {
        this.imgUrl = this.$store.getters.imgUrl;
        const id = this.$route.query.id;
        this.user = this.$store.getters.user;
        this.getJrxhMenu();
        //this.getCationsInfo();
    },
    mounted() {},
    methods: {
        onTab(index) {
            this.curIndex = index;
            this.param = this.navList[this.curIndex];
            this.getJrxhList();
        },
        async getJrxhMenu() {
            const res = await this.$store.dispatch("access/getJrxhMenu");
            this.navList = res;
            this.param = this.navList[this.curIndex];
            this.getJrxhList();
        },

        async getJrxhList() {
            const data = {
                rootId: this.param.id,
            };
            const res = await this.$store.dispatch("access/getJrxhList", data);
            this.grData = res.list[0];
            console.log(this.grData);
        },

        async getCationsInfo() {
            const res = await this.$store.dispatch("access/getApplyLette", {});
            this.grData = res.list[0];
            console.log(res);
        },
        async setADDesigner() {
            this.formData.userId = this.user.id;
            this.formData.userName = this.user.mobile;
            this.formData.phone = this.user.mobile;
            this.formData.fileUrl = this.formData.coverImageUrl.join(",");
        },
        onRelease() {
            this.$refs.formData.validate((vaild) => {
                if (vaild) {
                    this.setADDesigner();
                }
            });
        },
        handleExceed(files, fileList) {
            this.$message.error("上传文件最多只能1个!请删除文件重新上传");
        },
        beforeAvatarUpload(file) {
            this.formData.fileName = file.name;
            const isZIP = file.type === "application/x-zip-compressed";
            const isZIP1 = file.type === "application/zip";
            if (!isZIP && !isZIP1) {
                this.$message.error("上传文件只能是 zip 格式!");
                return false;
            }
            return true;
        },
        handleSuccess(res, file, fileList) {
            console.log(res);
            if (res.code == 200) {
                this.formData.coverImageUrl.push(res.data.url);
            }
        },
        handleRemove(file, fileList) {
            this.formData.coverImageUrl = [];
        },
    },
};
</script>

<style scoped>
@import "./jrxh.css";
.cont {
    width: 1200px;
    margin: 20px auto;
}
</style>
